<template>
  <div class="home">
    <van-sticky>
      <van-nav-bar title="标题" left-text="返回" right-text="按钮" left-arrow />
      <van-grid>
        <van-grid-item text="全城" />
        <van-grid-item text="自助餐" />
        <van-grid-item text="排序" @click="show = true" />
        <van-grid-item text="筛选" />
      </van-grid>
    </van-sticky>

    <van-overlay :show="show" @click="show = false">
      <div class="wrapper" @click.stop>
        <ul>
          <li>价格排序</li>
          <li>销量排序</li>
          <li>评价排序</li>
        </ul>
      </div>
    </van-overlay>

    <div style="height:1000px;background:red"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      show: false,
    };
  },
};
</script>
<style lang="scss">
.wrapper {
  padding-top: 100px;
  ul {
    background: #fff;
  }
}
</style>
